<!--
 * @Description: 梦幻西游
 * @Author: rendc
 * @Date: 2021-08-17 14:48:28
 * @LastEditors: rendc
 * @LastEditTime: 2021-08-18 09:14:54
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>梦幻西游</title>
  <style>
    body,
    ul {
      margin: 0;
      padding: 0;
    }

    /* 背景图片相关样式和动画 */
    .main {
      width: 100%;
      overflow-x: hidden;
      height: 786px;
    }

    .main>.bg {
      width: 3920px;
      height: 100%;
      margin-left: -1920px;
      background-image: url("../1-html/day07/images/bg.jpg");
      background-repeat: repeat-x;

      animation-name: bg;
      /* 指定一个动画周期的时长 单位支持s ms 无单位值无效 */
      animation-duration: 30s;
      /* 定义CSS动画在每一动画周期中执行的节奏。 */
      animation-timing-function: linear;
      /* 定义动画在结束前运行的次数 infinite代表无限循环  number默认是1 可以用小数 */
      animation-iteration-count: infinite;
    }

    @keyframes bg {
      from {
        margin-left: -1920px;
      }

      to {
        margin-left: 0;
      }
    }

    /* 四个人物相关样式和动画 */
    .content {
      /* 200px * 4 = 800px 50px * 3 = 150px */
      width: 950px;
      /* position: absolute; */
      /* left: 50%; */
      /* margin-left: -475px; */
      /* bottom: 240px; */
    }

    .content>ul>li {
      float: left;
      position: absolute;
      width: 200px;
      margin-right: 30px;
      overflow: hidden;
    }

    .wk {
      left: 50%;
      margin-left: -475px;
      bottom: 300px;
    }

    .ts {
      left: 50%;
      margin-left: -200px;
      bottom: 250px;
    }

    .content>ul>li>img {
      width: 1600px;
      animation-name: people;
      animation-duration: 1s;
      animation-timing-function: steps(8);
      animation-iteration-count: infinite;
    }

    @keyframes people {
      from {
        margin-left: 0;
      }

      to {
        margin-left: -1600px;
      }

    }
  </style>
</head>

<body>
  <div class="main">
    <div class="bg">
    </div>
  </div>
  <div class="content">
    <ul>
      <li class="wk"><img src="../1-html/day07/images/wk.png" alt="悟空打妖怪去啦～"></li>
      <li><img src="../1-html/day07/images/bj.png" alt="八戒睡懒觉去了"></li>
      <li class="ts"><img src="../1-html/day07/images/ts.png" alt="师傅被妖怪抓走了"></li>
      <li><img src="../1-html/day07/images/ss.png" alt="沙僧跑路了"></li>
    </ul>
  </div>
</body>

</html>